import React from 'react';
import { Flex, Layout, Menu } from 'antd';
import {Link} from "react-router-dom";
import { LoginOutlined } from '@ant-design/icons';
import SqlStatus from "./SqlStatus";
import HeaderUser from "./HeaderUser";


const { Header } = Layout;
const NavigateHeader = () => {
    return (
        <Header className='project-header'>
            <div className="project-logo">
                <img className={"logo-icon"}
                     src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
                     alt="ProComponents" height="40"/>
                <span className={"logo-title"}>Tulip</span>
            </div>
            <Menu
                className='project-header-menu'
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={['2']}
                items={[
                    { key: '/login', label: <Link to="/login">登录页面</Link>, icon: <LoginOutlined /> },
                    { key: '/logout', label: <Link to="/logout">退出登录</Link>, icon: <LoginOutlined /> },
                    { key: '2', label: 'nav 2' },
                    { key: '3', label: 'nav 3' },
                    { key: '4', label: 'nav 5' },
                    { key: '45', label: 'nav 6' },
                    { key: '6', label: 'nav 7' },
                    { key: '7', label: 'nav 8' },
                    { key: '48', label: 'nav 9' },
                ]}
            />
            <Flex className='project-header-menu-extra' gap={20}
                  align='center'
                  justify='center'
                  style={{ marginRight: 20 }}
            >
                <SqlStatus/>
                <HeaderUser/>
            </Flex>

        </Header>
    );
};

export default NavigateHeader;